<template>
    <transition name="slide-fade">
        <div>
            <mt-button type="primary" @click="handlePlay">{{buttonName}}</mt-button>
            <mt-progress :value="playedPercent" :bar-height="8">
                <div slot="start">{{currentTimeStr}}</div>
                <div slot="end">{{durationStr}}</div>
            </mt-progress>
            <mt-range v-model="volume" :max="100" :bar-height="12">
                <div slot="start">声音：</div>
                <div slot="end">100</div>
            </mt-range>
            <audio id="media" :src="song.mp3Url" style="width: 0; height: 0; visibility: hidden;"
                   @timeupdate="handleTimeUpdate">
                <source :src="song.mp3Url" type="audio/mpeg">
            </audio>
        </div>
    </transition>
</template>
<script>
    import {mapState} from 'vuex';
    import {Toast} from 'mint-ui'

    let media;

    export default {
        name: 'control',
        data() {
            return {
                show: false,
                duration: 1,
                currentTime: 0,
                volume: 100,
                lrcCurIndex: -1
            }
        },
        computed: {
            ...mapState(['song', 'playing', 'lyricArr', 'lrcTimeArr']),
            buttonName() {
                return this.playing ? '暂停' : '播放';
            },
            playedPercent(){
                return (this.currentTime / this.duration) * 100;
            },
            currentTimeStr(){
                return this.convertToTime(this.currentTime);
            },
            durationStr(){
                return this.convertToTime(this.duration);
            },
        },
        mounted(){
            media = document.getElementById('media');
            media.addEventListener('loadeddata', () => {
                let interval = setInterval(() => {
                    if (media.buffered.length < 1) return;
                    if (Math.floor(media.buffered.end(0)) >= Math.floor(media.duration))
                        clearInterval(interval);
                }, 250);
            });
            media.addEventListener('ended', () => {
                media.currentTime = 0;
                this.$store.commit("changePlaying", false);
            });

            this.$root.$on('play', () => {
                this.show = true;
                this.$store.commit("changePlaying", true);
                setTimeout(() => {
                    media.play();
                }, 1);
            });
            this.$root.$on('pause', () => {
                media.pause();
                this.$store.commit("changePlaying", false);
            });
        },
        methods: {
            handleTimeUpdate() {
                if (this.duration != 0) {
                    this.duration = media.duration;
                }
                this.currentTime = media.currentTime;

                let targetIndex;
                for (let index = this.lrcCurIndex < 0 ? 0 : this.lrcCurIndex; index < this.lrcTimeArr.length; index++) {
                    if (parseInt(this.currentTime) == parseInt(this.lrcTimeArr[index])) {
                        targetIndex = index;
                        break;
                    }
                }

                if (!targetIndex) return;

//                Toast({
//                    message: '' + targetIndex,
//                    duration: 300
//                });

//                if (this.lrcLastIndex == curIndex) {
//                    return;
//                }
                this.lrcCurIndex = targetIndex;
                this.color();
                this.disappear();
//                this.lrcLastIndex = curIndex;
            },
            convertToTime(time){
                let min = Math.floor((time / 60) % 60);
                let sec = Math.floor(time % 60);
                if (sec < 10) {
                    sec = '0' + sec;
                }
                if (min < 10) {
                    min = '0' + min;
                }
                return min + ':' + sec;
            },
            handlePlay() {
                this.$root.$emit(this.playing ? 'pause' : 'play');
            },
            changeVolume(){
                media.volume = this.volume / 100;
            },
            color() {
                for (let i = 0; i < this.lyricArr.length; i++) {
                    this.lyricArr[i].selected = false;
                }
                if (this.lrcCurIndex >= 0) {
                    this.lyricArr[this.lrcCurIndex].selected = true;
                }
            },
            disappear() {
                if (this.lrcCurIndex >= 2) {
                    this.$store.commit("changeLrcMargin", this.lrcCurIndex * (-2) + 8.25);
                }
            }
        },
        watch: {
            volume: function (nv, ov) {
                this.changeVolume();
            }
        }
    };
</script>